<template>
  <svg class="svg-icon" aria-hidden="true" :style="style">
      <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: "svg-icon",
  props: {
      // 当前 svg 的文件名，如 arrow-left.svg，该值就应该是 arrow-left
      name: {
          type: String,
          required: true
      },
      // 颜色值
      color: {
          type: String,
          default: "#999999"
      },
      // 宽度
      width: {
          type: String,
          default: "1em" // 默认宽度
      },
      // 高度
      height: {
          type: String,
          default: "1em" // 默认高度
      }
  },
  computed: {
      iconName() {
          return `#icon-${this.name}`;
      },
      style() {
          return {   
              "--color": this.color,
              "width": this.width,
              "height": this.height };
      }
  }
};
</script>
<style lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
  color: var(--color);
}
</style>
